<template>
	<root-node class="jsoneditor-page disflex ju_bt">
		<div>
			<JsonEditor
				ref="jsonEditorRef"
				v-model="value"
				class="jsonEditor"
				mode="code"
				:options="options"
			></JsonEditor>
		</div>
		<div class="jsonvalue">{{ value }}</div>
	</root-node>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
	name: "JsonEditorPage",
});
</script>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import JsonEditor from "@/components/JsonEditor.vue";
import type { JSONEditorMode } from "jsoneditor";

const jsonEditorRef = ref();

// this is must use ref beacuse reactive will make v-model failure
const value = ref({ name: "张三", age: 21, sex: 1, address: "江苏省南京市" });

const options = reactive<{ mode: JSONEditorMode }>({
	mode: "code",
});
</script>

<style lang="scss" scoped>
.jsoneditor-page {
	width: 100%;
	& > div {
		width: 49.6%;
	}
}
.jsonvalue {
	border: 1px solid rgba(0, 0, 0, 0.15);
	padding: 15px;
}
</style>
